<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
*{ margin: 0px; padding: 0px; border: 0px; font-family: "microsoft yahei";}
.fl{ float: left; display: inline;}
.fr{ float: right; display: inline;}
a{ text-decoration: none; color: red;}
.page_wrap {color: #000000;font-family: "Microsoft YaHei"; background:#ffffff; overflow:hidden; margin: 0 auto; max-width: 640px;min-width: 320px;width: 100%; text-align:center; position:relative;}
.page_wrap .gd{ width:100%; height:auto; overflow:hidden; position:relative;}
.page_wrap .gd .gd1{ width:80%; height:auto; margin:5% auto; overflow:hidden;}
.page_wrap .gd .gd1 div{ width:auto; height:100%;}
.page_wrap .gd img.left{ position:absolute; top:40%; left:0;}
.page_wrap .gd img.right{ position:absolute; top:40%; right:0;}
.page_wrap .gd .gd1 div img{ box-shadow:10px 10px 10px #ccc; width:80%;}
.page_wrap .gd .gd1 div.gd3{ text-align:center; height:450px;}
.page_wrap .gd .gd1 div.gd3 img.active{ animation:a 2s; transform-style:preserve-3d; backface-visibility:visible;}
@keyframes a
{
0% { transform:rotateX(90deg);transform:rotateZ(90deg); width:0; box-shadow:10px 10px 10px #ccc; opacity:0.5; margin-left:30%;}
25% {transform:rotateX(180deg);transform:rotateZ(180deg);width:25%; box-shadow:5px 5px 5px #ccc; opacity:1; margin-right:50%;}
50% {transform:rotateX(270deg); width:50%; box-shadow:-10px 20px 10px #ccc; opacity:0.5; margin-left:30%;}
75% {transform:rotateY(360deg);transform:rotateZ(360deg);width:75%; box-shadow:30px 5px 10px #ccc; opacity:0.75; margin-right:50%;}
100% {transform:rotateX(0deg); width:100%; box-shadow:10px 10px 10px #ccc; opacity:1; margin:0;}
}

</style>
<body>
<div class="page_wrap">
	<div class="gd">
    	<img src="images/left.jpg" class="left"/>
        <img src="images/right.jpg" class="right"/>
        <div class="gd1">
        	<div class="gd2">
            	<div class="fl gd3"><img src="images/xyfp02_09.jpg" /></div>
                <div class="fl gd3"><img src="images/xyfp02_09.jpg" /></div>
                <div class="fl gd3"><img src="images/xyfp02_09.jpg" /></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="http://mzt.dytjyy.com/nkzt/gtyzl160102/images/jquery1.3.2.js"></script>
<script>
$(function(){
	var width=$(".gd1").width();
	$(".gd1 div.gd2 .gd3").css("width",width);
	var length=$(".gd1 div img").length;
	$(".gd1 div.gd2").css("width",width*length);
	var index=0;
	$(".left").click(function(index){
		clearInterval(timer);	
		ds1();
		timer=setInterval(ds,3000);
	});
	$(".right").click(function(index){
		clearInterval(timer);	
		ds();
		timer=setInterval(ds,3000);
	});
	timer=setInterval(ds,5000);
	function ds(){
		if(index==length-1){
			index=0;
			qh();	
		}else{
			index++;	
		}	qh();
	}
	function ds1(){
		if(index==0){
			index=length-1;
			qh();	
		}else{
			index--;	
		}	qh();
	}
	function qh(){
		var yd=-(index*width)+'px';
		$(".gd1 div.gd2").stop().animate({marginLeft:yd},500);
		$(".gd3 img").removeClass("active");
		$(".gd3 img").eq(index).addClass("active");
	}
})
</script>
